<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-text-main cu-mobile-bottom cu-w-100 cu-position-relative cu-py-20">
			<block v-for="(item,idx) in listData">
				<cu-card-list :key="idx" :cudata="item" @clickCardItem="clickCardItem"></cu-card-list>
				<cu-separator :blank="true" />
			</block>
		</view>
		<u-modal :show="showModal" @close="closeModal" @cancel="closeModal" @confirm="confirmModal" ref="uModal"
			:title="modal.title" :content='modal.content' :zoom="true" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "设置",
					leftText: "返回",
					leftIcon: "back",
				},
				showModal: false,
				modelType:"",
				modal: {
					title: '温馨提示',
					content: '确认退出么？'
				},
				listData: [
					{
						list: [
							{
								text: '初始化背景',
								type: 'color',
								data: {
									name: "init-bg"
								}
							},
							{
								text: '设置背景',
								type: 'color-filled',
								data: {
									name: "set-bg"
								}
							},
						]
					}, 
					{
						list: [{
							text: '退出登录',
							custom: true,
							type: 'icon-tuichu',
							data: {
								name: "loginout"
							}
						}]
					}, 
				]
			}
		},
		onLoad() {

		},
		methods: {
			clickCardItem(data) {
				if (data && data.name === 'loginout') {
					this.modelType = "loginout";
					this.modal.content = "确认退出么？";
					this.showModal = true;
				}
				else if (data && data.name === 'init-bg') {
					this.modelType = "init-bg";
					this.modal.content = "确认初始化背景？";
					this.showModal = true;
				}
				else if (data && data.name === 'set-bg') {
					const that = this
					uni.chooseMedia({
						count:1,
						mediaType:["image"],
						success:function(e){
							console.log(e)
							const data = {
								url: e && e.tempFiles && e.tempFiles[0] ? e.tempFiles[0].tempFilePath : undefined
							}
							that.$store.dispatch('commonStore/updateBgImg',data);
						},
						fail:function(e){
							uni.showToast({
								icon:"error",
								title: '设置失败',
								duration: 2000
							});
						}
					})
				}
			},
			closeModal() {
				this.showModal = false;
				// console.log('close');
			},
			confirmModal() {
				if (this.modelType === "loginout") {
					this.$store.dispatch('loginStore/loginout');
				}
				else if (this.modelType === "init-bg") {
					const data = {
						url: "/static/images/back-img.jpg"
					}
					this.$store.dispatch('commonStore/updateBgImg',data);
					this.showModal = false;
				}
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">

</style>